import React from 'react'

import MenuSettingSendMessage from './MenuSettingSendMessage'


class MenuSettingEditor extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      type: 'media_id'
    }
  }

  componentDidUpdate() {

    var activeButton = this.getActiveButton();
    // console.log(activeButton)
    if (activeButton) {
      var viewChecked = activeButton.type == "view";
      var mediaChecked = activeButton.type == "media_id";
      var clickChecked = activeButton.type == "click";
      $(this.refs.menuSendMsg).prop('checked', mediaChecked);
      $(this.refs.menuUrl).prop('checked', viewChecked);
      $(this.refs.menuText).prop('checked', clickChecked);

      if (this.state.type != activeButton.type) {
        this.setState({
          type: activeButton.type
        })
      }
    }
  }

  /**
   * menu object value change method
   * @param  {[Object]} event [Click event object]
   * @param  {[String]} key   [key of menu object]
   *
   */
  onMenuValueChange(event, key) {

    var value = $(event.target).val();
    // if (value.length >= 7) {
    //   value = value.substring(0, 7)
    // }

    var activeIndex = this.props.activeButtonIndex,
        activeSubIndex = this.props.activeSubIndex,
        buttons = this.props.buttons;

    if (activeIndex != null && activeIndex < buttons.length) {
      var button = buttons[activeIndex];
      if (this.props.isSubButton) {
        if (activeSubIndex != null && activeSubIndex < button.sub_button.length) {
          button.sub_button[activeSubIndex][key] = value;
        }else if (activeSubIndex == null && button.sub_button.length < 5) {
          var newSubButton = {
            "type":"media_id",
            "name":"",
            "key":(new Date()).getTime()
          }
          newSubButton[key] = value
          button.sub_button.push(newSubButton)
          activeSubIndex = button.sub_button.length - 1;
        }
      }else {
        button[key] = value;
      }
    }else if (activeIndex == null && buttons.length < 3) {
      var newButton = {
         "type":"media_id",
         "name":"",
         "key":"55555",
         "sub_button": []
      }
      newButton[key] = value;
      buttons.push(newButton)
      activeIndex = buttons.length - 1;
    }
    this.props.onMenuValueChange(buttons, activeIndex, activeSubIndex)
  }

  onMenuDelete(event) {
    var activeButtonIndex = this.props.activeButtonIndex,
        activeSubIndex = this.props.activeSubIndex,
        buttons = this.props.buttons
    if (this.props.isSubButton) {
      if (activeButtonIndex != null && buttons.length > activeButtonIndex) {
        var subButtons = buttons[activeButtonIndex].sub_button;
        if (activeSubIndex != null && subButtons.length > activeSubIndex) {
          subButtons.splice(activeSubIndex, 1);
        }
      }
    }else {
      if (activeButtonIndex != null && buttons.length > activeButtonIndex) {
        buttons.splice(activeButtonIndex, 1);
      }
    }
    this.props.onMenuValueChange(buttons, activeButtonIndex, activeSubIndex)
  }

  getActiveButton() {
    var activeButtonIndex = this.props.activeButtonIndex,
        activeSubIndex = this.props.activeSubIndex,
        buttons = this.props.buttons,
        button = null;
    if (this.props.isSubButton) {
      if (activeButtonIndex != null && buttons.length > activeButtonIndex) {
        var subButtons = buttons[activeButtonIndex].sub_button;
        if (activeSubIndex != null && subButtons.length > activeSubIndex) {
          button = subButtons[activeSubIndex];
        }
      }
    }else {
      if (activeButtonIndex != null && buttons.length > activeButtonIndex) {
        button = buttons[activeButtonIndex];
      }
    }

    return button;
  }

  radioChange(event, activeButton) {
    var value = $(event.target).val();
    if (activeButton != null
        && (activeButton.sub_button == null || activeButton.sub_button.length == 0)) {
      this.onMenuValueChange(event, "type")
      this.setState({
        type: value
      })
    }
  }

  renderAction(activeButton) {
    var self = this;
    if (this.state.type == 'media_id') {
      // console.log("render send message")
      return (
        <div className="menu-action-media_id">
          <MenuSettingSendMessage
            wechat = {self.props.wechat}
            activeButton={activeButton}
            onSelectMediaClick={(event)=>self.props.onSelectMediaClick(event)}/>
        </div>
      );
    }else if (this.state.type == 'view') {
      return (
        <div className="menu-action-view row">
          <label className="col-sm-3 control-label" for="menu-action-view">链接地址</label>
          <div className="col-sm-8">
            <input type="text" className="form-control" id="menu-action-view"
                   value={activeButton.url?activeButton.url:""}
                   onChange={(event)=>this.onMenuValueChange(event, "url")}/>
          </div>
        </div>
      )
    }else if (this.state.type == 'click') {
      var title = "添加文字";
      // if (activeButton.key) {
      //   title += ":" + activeButton.key
      // }
      return (
        <div className="menu-action-media_id">
          <button className="btn btn-success"
                  onClick={(event)=>this.props.onEditEventText(activeButton.key)}>{title}</button>
        </div>
      )
    }
  }

  renderActionRadio(activeButton) {
    if (activeButton==null
      || (activeButton.sub_button != null && activeButton.sub_button.length > 0)) {
      return "";
    }else {

      return (
        <div className="menu-action">
          <div className="menu-action-radio row">
            <label className="col-sm-3 control-label menu-action-label" for="menu-title">菜单内容</label>
            <div className="col-sm-8">
              <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions"
                       id="menu-send-msg" value="media_id"
                       ref="menuSendMsg"
                       onChange={(event) => this.radioChange(event, activeButton)}
                       /> 发送图文
              </label>
              <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions"
                       id="menu-send-text" value="click"
                       ref="menuText"
                       onChange={(event) => this.radioChange(event, activeButton)}
                       /> 发送文字
              </label>
              <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions"
                       id="menu-url" value="view"
                       ref="menuUrl"
                       onChange={(event) => this.radioChange(event, activeButton)}
                       /> 跳转网页
              </label>
            </div>
          </div>
          {this.renderAction(activeButton)}
        </div>
      )
    }
  }

  render() {
    var activeButton = this.getActiveButton();

    return (
      <div className="menu-setting-editor" >
        <div className="menu-editor-header">
          <span className="menu-header-title">{activeButton?activeButton.name:""}</span>
          <a onClick={(event) => this.onMenuDelete(event)}>删除菜单</a>
        </div>
        <div className="menu-title row">
          <label className="col-sm-3 control-label" for="menu-title">菜单名称</label>
          <div className="col-sm-8">
            <input type="text" className="form-control" id="menu-title"
                   value={activeButton?activeButton.name:""}
                   onChange={(event)=>this.onMenuValueChange(event, "name")}/>

          </div>
        </div>

        {this.renderActionRadio(activeButton)}
      </div>
    );
  }
}

export default MenuSettingEditor
